<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8"/>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
    <title>注册(2/3)</title>
    <link rel="stylesheet" href="../css/reset.css">
    <link rel="stylesheet" href="../css/global.css">
    <link rel="stylesheet" href="../css/regist2.css">
    <script src="../lib/autoSize.js"></script>
</head>
<body>
    <header>
        <div class="left-btn">
            <img class="back" src="../images/header/back.png" alt="" onclick="history.go(-1)">
        </div>
        <h1 class="">注册（2/3）</h1>
        <div class="right-btn">
            <!-- 此处写右边按钮-->
        </div>
    </header>

    <main>
        <div class="select selArea">
            <div class="selectHead">
                <p>
                    <span>地区：</span>
                    <span class="val area">请选择您所在地区</span>
                </p>
                <img src="../images/icons/downArrow.png"/>
            </div>
            <div class="selectCont">
                <ul class="shi">
                    <li><div class="next">下一步</div></li>
                </ul>
                <ul class="xian">
                    <li><div class="prev">上一步</div><div class="next">下一步</div></li>
                </ul>
                <ul class="xiang">
                    <li><div class="prev">上一步</div><div class="complete">完成</div></li>
                </ul>
            </div>
        </div>
        <div class="name">
            <span>姓名：</span>
            <input id="userName" placeholder="请输入您的姓名">
        </div>
        <div class="select selCoop">
            <div>
                <p>
                    <span>性别：</span>
                    <span class="val">请选择性别</span>
                </p>
                <img src="../images/icons/downArrow.png"/>
            </div>
            <ul>
                <li data-sex="0">男</li>
                <li data-sex="1">女</li>
            </ul>
        </div>
        <div class="idCard">
            <span>身份证：</span>
            <input id="idCard" placeholder="请填写真实的身份证号码">
        </div>
        <div class="idPic">
            <header>上传身份证正反面照片</header>
            <div>
                <input type="file" id="idPic1" accept="image/jpeg,image/jpg,image/png" onchange="selectImage(this,'img1');">
                <img src="" id="img1">
                <p>正面</p>
            </div>
            <div>
                <input type="file" id="idPic2" accept="image/jpeg,image/jpg,image/png" onchange="selectImage(this,'img2');">
                <img src="" id="img2">
                <p>反面</p>
            </div>
        </div>
        <div class="terms"><span>阅读并已同意</span><span>《隐私保护协议》</span></div>
    </main>

    <div class="termsCont">
        <header>隐私保密协议</header>
        <p>尊敬的用户，欢迎阅读本协议：</p>
        <br/>
        <p>地方法制平台依据本协议的规定提供服务，本协议具有合同效力。您必须完全同意以下所有条款并完成个人资料的填写，才能保证享受到更好的地方法制平台客服服务。您使用服务的行为将视为对本协议的接受，并同意接受本协议各项条款的约束。</p>
        <p>用户必须合法使用网络服务，不作非法用途，自觉维护本平台的声誉，遵守所有使用网络服务的网络协议、规定、程序和惯例。</p>
        <p>为更好的为用户服务，用户应向本地方法制平台提供真实、准确的个人资料，个人资料如有变更，应立即修正。如因用户提供的个人资料不实或不准确，给用户自身造成任何性质的损失，均由用户自行承担。</p>
        <p>尊重个人隐私是地方法制平台的责任，平台在未经用户授权时不得向第三方公开、编辑或透露用户个人资料的内容，但由于政府要求、法律政策需要等原因除外。在用户发送信息的过程中和本平台收到信息后，本平台将遵守行业通用的标准来保护用户的私人信息。本平台会尽力使用商业上可接受的方式来保护用户的个人信息，但不对用户信息的安全作任何担保。</p>
        <p>本平台有权在必要时修改服务条例，本平台的服务条例一旦发生变动，将会在本平台的重要页面上提示修改内容，用户如不同意新的修改内容，须立即停止使用本协议约定的服务，否则视为用户完全同意并接受新的修改内容。根据客观情况及经营方针的变化，本平台有中断或停止服务的权利，用户对此表示理解并完全认同。</p>
        <p>本保密协议的解释权归地方法制平台运营商成都浩石科技有限公司所有。</p>
        <br/>
        <p>成都浩石科技有限公司</p>
    </div>

    <div id="loadPrompt"><span></span></div>
    <div class="mask"></div>

    <button id="btn" class="btn">下一步</button>



    <script src="../lib/jquery-3.2.1.min.js"></script>
    <script src="../lib/fastclick.js"></script>
    <script src="../lib/layer.js"></script>
    <script src="../js/common.js"></script>
    <script type="text/javascript">
        $(function() {
            FastClick.attach(document.body);
        });

//        隐私协议
        $(".terms").on("click",function () {
            $(".terms").toggleClass("active");
        })
        $(".terms span").on("click",function (e) {
            $(".terms").removeClass("active");
            $(".termsCont").slideDown(500);
        })
        $(".termsCont").on("click",function () {
            $(".termsCont").slideUp(500);
        })

        //    上滑加载提示
        function upLoadTip(tips) {
            $("#loadPrompt span").text(tips);
            $("#loadPrompt").fadeIn();
            setTimeout(function () {
                $("#loadPrompt").fadeOut();
            }, 2000);
        }

        //      预览图片并转为base64
        function selectImage(file,id) {
            if (!file.files || !file.files[0]) {
                return;
            }
            var reader = new FileReader();
            reader.onload = function (evt) {
                $('#'+id).attr('src',evt.target.result);
                var image = new Image();
                image.src = evt.target.result;
                image.onload = function() {
                    var cutImg = cutDowmImg(image, $(window).height());
                    //var i = evt.target.result.substring(evt.target.result.indexOf(",")+1);
                    var i = cutImg.substring(evt.target.result.indexOf(",")+1);
                    localStorage.setItem(id,i);
                    $("#"+id).show();
                    img1 = $("#idPic1").val();
                    img2 = $("#idPic2").val();
                };
            };
            reader.readAsDataURL(file.files[0]);
        }

        function cutDowmImg(img, width){
            var canvas = document.createElement("canvas");
            canvas.width = Math.min(img.width, width);
            canvas.height = img.height*width/img.width;
            var cxt = canvas.getContext("2d");
            cxt.drawImage(img, 0, 0, img.width, img.height, 0, 0, canvas.width, canvas.height);
            return canvas.toDataURL('image/jpeg', 0.1);
        }

        //      获取传来的参数
        function GetQueryString(name) {
            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
            var r = window.location.search.substr(1).match(reg);
            if (r != null) return (r[2]);
            return null;
        }
        //		下拉地区选框
        $(".selArea .selectHead").on("click",function () {
            $(".selArea").toggleClass("active");
            $(".selArea .selectCont").slideToggle();
            $(".mask").fadeToggle();
            $(".selArea .selectCont ul").on("click","li",function () {
                if(!$(this).find("div").length){
                    $(this).addClass("active").siblings("li").removeClass("active");
                    var $that  = $(this);
                    var id = $(this).attr("id");
//                    判断是否有下一级
                    $.ajax({
                        url: CONFIG.GENERAL_IPS[0].getAreaByPid + "&pid=" + id,
                        method: "GET",
                        async: false,
                        success: function (data) {
                            var jsonData = JSON.parse(data);
                            console.log(jsonData);
                            if(!jsonData.datas.length){
                                if($that.parents("ul").index() == 0){
                                    $that.siblings("li").last().html("<div class='complete'>完成</div>");
                                }else{
                                    $that.siblings("li").last().html("<div class='prev'>上一步</div><div class='complete'>完成</div>");
                                }
                            }else{
                                if($that.parents("ul").index() == 0){
                                    $that.siblings("li").last().html("<div class='next'>下一步</div>");
                                }else{
                                    $that.siblings("li").last().html("<div class='prev'>上一步</div><div class='next'>下一步</div>");
                                }
                            }
                        }
                    })
                }
            })
        })
        //      上一步
        $(".selArea").on("click",".prev",function (e) {
            e.stopPropagation();
            $(this).parents("li").siblings("li").removeClass("active");
            $(this).parents("ul").prev().show().siblings("ul").hide();
        })
        //      下一步
        $(".selArea").on("click",".next",function (e) {
            e.stopPropagation();
            $(this).parents("ul").next().show().siblings("ul").hide();
            var id = $(this).parents("ul").find("li.active").attr("id");
            getArea2(id,$(this).parents("ul").index()+1);
        })
        //      完成
        $(".selArea").on("click",".complete",function (e) {
            areaId = $(this).parents("ul").find("li.active").attr("id");
            areaName = $(this).parents("ul").find("li.active").html();
            var name = ($(".selArea ul:eq(0) li.active").html()+$(".selArea ul:eq(1) li.active").html()+$(".selArea ul:eq(2) li.active").html()).replace(/undefined/g,"");       //预览选择的区域地址
            $(".selArea .val").html(name);
            $(".selArea").removeClass("active");
            $(".selArea .selectCont").slideUp();
            $(".mask").fadeOut();
        })

        //      下拉选择性别
        $(".selCoop>div").on("click",function () {
            $(".selCoop").toggleClass("active");
            $(".selCoop>ul").slideToggle();
            $(".mask").fadeToggle();
            $(".selCoop>ul").on("click","li",function () {
                $(this).addClass("active").siblings("li").removeClass("active");
                sex = $(this).data("sex");
                $(".selCoop .val").html($(this).html());
                $(".selCoop").removeClass("active");
                $(".selCoop>ul").slideUp();
                $(".mask").fadeOut();
            })
        })


        var phoneNumber = GetQueryString("phoneNum");
        var id=[];      //保存市级id
        var areaId,areaName;      //最终选择的地区id和名称
        var sex;      //性别
        var img1="",img2="";      //身份证正反面照片

//        获取所有地区数据(南充市)
        function getArea() {
            $.ajax({
                url: CONFIG.GENERAL_IPS[0].getArea,
                method: "GET",
                async: false,
                success: function (data) {
                    var jsonData = JSON.parse(data);
                    console.log(jsonData);
                    var str = "";
                    for(var i = 0;i < jsonData.datas.length;i++){
                        str += "<li id='"+jsonData.datas[i].id+"'>"+jsonData.datas[i].name+"</li>";
                        id.push(jsonData.datas[i].id);
                    }
                    $(".selArea .shi").html(str + $(".selArea .shi").html());
                    $(".selArea .shi li").eq(0).addClass("active");
                }
            })
        }
        getArea();
        //        获取地区数据(县级及以下)
        function getArea2(pid,level) {
            $.ajax({
                url: CONFIG.GENERAL_IPS[0].getAreaByPid + "&pid=" + pid,
                method: "GET",
                async: false,
                success: function (data) {
                    var jsonData = JSON.parse(data);
                    console.log(jsonData);
                    $(".selArea .selectCont ul").eq(level).html($(".selArea .selectCont ul").eq(level).find("li").eq($(".selArea .selectCont ul").eq(level).find("li").length-1));
                    var str = "";
                    if(jsonData.datas){
                        for(var i = 0;i < jsonData.datas.length;i++){
                            str += "<li id='"+jsonData.datas[i].id+"'>"+jsonData.datas[i].name+"</li>";
                        }
                        $(".selArea .selectCont ul").eq(level).html(str + $(".selArea .selectCont ul").eq(level).html());
                        $(".selArea .selectCont ul").eq(level).find("li").eq(0).addClass("active");
                    }
                }
            })
        }

//        点击下一步注册
        $("#btn").on("click",function () {
            var name = $("#userName").val();
            var code = $("#idCard").val();
            if($(".selArea .val").html() == "请选择您所在地区"){
                layer.open({
                    content: '请选择地区！',
                    skin: 'msg',
                    time: 2
                });
            }else if(!name || !/^[\u4e00-\u9fa5]+(·[\u4e00-\u9fa5]+)*$/.test(name)){
                layer.open({
                    content: '请输入真实姓名！',
                    skin: 'msg',
                    time: 2
                });
            }else if($(".selCoop .val").html() == "请选择性别"){
                layer.open({
                    content: '请选择性别！',
                    skin: 'msg',
                    time: 2
                });
            }else if(!code || !/^\d{6}(18|19|20)?\d{2}(0[1-9]|1[12])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(code)){
                layer.open({
                    content: '请输入真实身份证号码！',
                    skin: 'msg',
                    time: 2
                });
            }else if(img1 == "" || img2 == ""){
                layer.open({
                    content: '请上传身份证正反面照片！',
                    skin: 'msg',
                    time: 2
                });
            }else if($(".terms").hasClass("active")){
                layer.open({
                    content: '请阅读并同意《隐私保护协议》！',
                    skin: 'msg',
                    time: 2
                });
            }else{
                window.location = "regist3.html?phoneNumber="+phoneNumber+"&areaId="+areaId+"&areaName="+areaName+
                        "&sex="+sex+"&realName="+name+"&idcard="+code;
            }
        })
    </script>
</body>
</html>
